<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">开放</el-button>
    <el-table :data="tableData" style="width: 100%; margin-top: 10px">
      <el-table-column label="药品名" prop="date" />
      <el-table-column label="药品总量" prop="name" />
      <el-table-column label="用品说明" prop="address" />
      <el-table-column label="注意事项" prop="address" />
      <el-table-column label="备注" prop="address" />

      <el-table-column label="操作" prop="address" />
    </el-table>
    <div style="margin-top: 10px">
      <el-button type="primary" @click="dialogVisible = true">
        添加自备/自购药品
      </el-button>
      <el-table :data="tableData" style="width: 100%; margin-top: 10px">
        <el-table-column label="药品名" prop="date" />
        <el-table-column label="商品名" prop="name" />
        <el-table-column label="类型" prop="address" />
        <el-table-column label="药品数量" prop="address" />
        <el-table-column label="用法说明" prop="address" />
        <el-table-column label="注意事项" prop="address" />
        <el-table-column label="操作" prop="address" />
      </el-table>
    </div>
    <el-dialog
      :before-close="handleClose"
      title="开放"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-dialog
        append-to-body
        title="添加"
        :visible.sync="innerVisible"
        width="60%"
      >
        <div>
          <el-form ref="form" :inline="true" label-width="80px" :model="form">
            <el-form-item label="药品类型">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="药品名">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="单次剂量">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用法">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用药频次">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="天数">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="计算总量">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="总量">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="注意事项">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <el-button type="primary" @click="innerVisible = true">添加</el-button>
      <el-table :data="tableData" style="width: 100%；margin-top: 10px;">
        <el-table-column label="药品名" prop="date" />
        <el-table-column label="单次剂量" prop="name" />
        <el-table-column label="用药频次" prop="address" />
        <el-table-column label="用法" prop="address" />
        <el-table-column label="天数" prop="address" />
        <el-table-column label="总量" prop="address" />
        <el-table-column label="注意事项" prop="address" />
        <el-table-column label="一般用法" prop="address" />
        <el-table-column label="操作" prop="address" />
      </el-table>
      <!-- <table class="tftable" style="width: 96%">
        <thead>
          <tr>
            <td colspan="1" style="width: 30px">
              <el-button type="text" @click="add">添加</el-button>
            </td>
            <td colspan="1">药材</td>
            <td colspan="1">数量</td>
            <td colspan="1">单位</td>
            <td colspan="1">操作</td>
          </tr>
        </thead>

        <tbody>
          <tr v-for="(item, index) in lsit" :key="index">
            <td>{{ index + 1 }}</td>
            <td><el-input v-model="item.drug" /></td>
            <td><el-input v-model="item.num" /></td>
            <td><el-input v-model="item.unit" /></td>
            <td>
              <el-button @click.native="delItemData(index)">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table> -->
      <el-form ref="form" label-width="80px" :model="form">
        <el-form-item label="临床诊断">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import { getSchedulingLists } from '@/api/scheduling'
  // import { getUserList } from '@/api/public'

  export default {
    props: {
      seeList: {
        type: Object,
        required: true,
      },
      pdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        innerVisible: false,
        tableData: [],
        lsit: [],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        options: [
          {
            value: '选项1',
            label: '黄金糕',
          },
          {
            value: '选项2',
            label: '双皮奶',
          },
          {
            value: '选项3',
            label: '蚵仔煎',
          },
          {
            value: '选项4',
            label: '龙须面',
          },
          {
            value: '选项5',
            label: '北京烤鸭',
          },
        ],
      }
    },
    mounted() {},

    beforeMount() {},
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
      add() {
        this.lsit.push({
          drug: '',
          num: '',
          unit: '',
        })
      },
      delItemData(index) {
        this.lsit.splice(index, 1)
      },
    },
  }
</script>

<style scoped>
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse;
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
